<template>
  <div class="box">
    <h1>入伍人数增长情况</h1>
    <div class="chart" ref="rightTopChartMain"></div>
  </div>

</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { getRightTopData } from '@/api/data-screen/right-charts';

onMounted(() => {
  getChartData();
})

// 获取图表展示所需的数据
function getChartData() {
  getRightTopData().then(result => {
    const rawData = result.data
    formattingData(rawData)
  })
}

function formattingData(rawData) {
  // 1. 按年份分组
  const grouped = rawData.reduce((acc, item) => {
    const year = item.enlistmentDate;
    if (!acc[year]) acc[year] = [];
    acc[year].push([item.college, item.nums]);
    return acc;
  }, {});

  // 2. 转换为前端要求的格式
  const frontendData = Object.entries(grouped).map(([year, data]) => ({
    dataGroupId: year,
    data: data.slice(0, 10),  // 确保最多取前10（如果SQL未限制）
  }));

  // 提取年份列表
  const years = frontendData.map(item => item.dataGroupId);
  // 输出: ['2018', '2019', '2020']

  // 提取每年总入伍人数（累加前10学院的人数）
  const originalData = frontendData.map(item => {
    // 检查 data 是否存在且是数组
    if (!item.data || !Array.isArray(item.data)) {
      return 0; // 返回默认值 0，或根据需求处理
    }
    // 安全累加
    return item.data.reduce((sum, entry) => {
      const [college, nums] = entry; // entry 应为 [学院, 人数]
      return sum + (typeof nums === 'number' ? nums : 0); // 确保 nums 是数字
    }, 0);
  });
  initRightTopChartMain(frontendData, originalData, years)
}




//右上动态柱形图
const rightTopChartMain = ref<HTMLElement | null>(null);
// 初始化
let rightTopChartInstance: echarts.ECharts | null = null;
function initRightTopChartMain(frontendData, originalData1, years1) {
  if (!rightTopChartMain.value) return;
  const myChart = echarts.init(rightTopChartMain.value);
  // 原始数据
  const originalData = originalData1;
  const years = years1;
  // 动态生成柱状图数据
  const seriesData = originalData.map((value, index) => ({
    value,
    groupId: years[index]
  }));

  // 计算相对于第一年的增长率

  const growthRates = originalData.map((value, index) => {
    const baseValue = originalData[index - 1];
    if (index === 0) return 0; // 第一年无增长率
    return ((value - baseValue) / baseValue) * 100;
  });


  const option = {
    color: "#ff99c8",
    legend: [
      {
        textStyle: {
          color: '#fff',
          fontSize: 16,
        }
      },
    ],
    xAxis: [
      {
        type: 'category',
        data: years,
        axisLabel: {
          color: '#fff'
        },
        name: '年份',          // x轴单位名称 [[9]]
        nameLocation: 'end',   // 名称显示在轴末端
        nameGap: 15,            // 名称与轴的距离
        nameTextStyle: {
          fontSize: 14,
          fontWeight: 'bold',
          color: 'white'
        }
      },
      {
        type: 'category',
        axisLine: { show: false }, // 隐藏轴线
        axisTick: { show: false }, // 隐藏刻度
        axisLabel: { show: false } // 隐藏标签
      }
    ],
    yAxis: [
      {
        axisLabel: {
          color: '#fff'
        },
        type: 'value',
        name: '人数（人）',    // y轴单位名称 [[9]]
        nameTextStyle: {
          fontSize: 14,
          fontWeight: 'bold',
          color: 'white'
        }
      },
      {
        axisLabel: {
          color: '#fff',
          formatter: (value) => {
            return value === 0 ? '' : `${value.toFixed(2)}%`; // 隐藏0%标签
          }
        },
        type: 'value',
        name: '增长率（%）',    // y轴单位名称 [[9]]
        splitLine: { show: false }, // 隐藏分割线
        nameGap: 30,
        nameTextStyle: {
          fontSize: 14,
          fontWeight: 'bold',
          color: 'white'
        }
      }
    ],
    dataGroupId: '',
    animationDurationUpdate: 1000,
    series: [
      {
        type: 'bar',
        color: {
          type: 'linear', // 线性渐变 
          x: 0,          // 渐变起点 x 坐标（0 表示左侧）
          y: 0,          // 渐变起点 y 坐标（0 表示顶部）
          x2: 0,         // 渐变终点 x 坐标
          y2: 1,         // 渐变终点 y 坐标（从上到下渐变）
          // to right, , );
          // (to right, , );
          colorStops: [
            { offset: 1, color: 'rgb(0, 90, 167)' }, // 起始颜色（顶部）
            { offset: 0, color: 'rgb(255, 253, 228)' }  // 结束颜色（底部）
          ]
        },
        id: 'sales',
        // 显示柱形图对应的数值
        label: {
          show: true,         // 显示数值标签 
          position: 'top',    // 标签位置：可选 'top'（顶部）、'inside'（内部）等 
          color: '#FFF',   // 标签文字颜色 
          fontSize: 14,       // 字体大小 
          formatter: '{c}'    // 格式化显示内容，{c} 表示当前数据值 
        },
        data: seriesData,
        universalTransition: {
          enabled: true,
          divideShape: 'clone'
        }
      },
      {
        name: '增长率',
        type: 'line',
        yAxisIndex: 1, // 绑定到右侧y轴
        data: growthRates.map((rate, index) => ({
          value: rate,
          // 显示数据标签
          label: {
            show: true,
            position: 'top',
            color: '#FF0000',
            fontSize: 14,
            formatter: (params) => {
              return index === 0 ? '' : `${params.value.toFixed(1)}%`;
            }
          }
        })),
        lineStyle: { color: '#FF0000', width: 3 },
        itemStyle: { color: '#ffc222' },
        // smooth: true, // 平滑曲线,
        symbol: 'circle', // 标记的图形
        symbolSize: 10, // 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
      }
    ]
  };

  // 调整折线图x轴索引（使其与增长率区间对齐）
  // option.series[1].xAxisIndex = 0; // 使用主x轴

  myChart.setOption(option);

  const drilldownData = frontendData

  myChart.on('click', function (event) {
    if (event.data) {
      let subData = drilldownData.find(function (data) {
        return data.dataGroupId === event.data.groupId;
      });
      if (!subData) {
        return;
      }
      // 构建下钻专用配置
      const drilldownOption = {
        xAxis: [{
          type: 'category',
          name: '学院',          // x轴单位名称
          nameLocation: 'end',   // 名称显示在轴末端
          nameGap: 10,            // 名称与轴的距离
          nameTextStyle: {
            fontSize: 14,
            fontWeight: 'bold',
            color: 'white'
          },
          data: subData.data.map(item => item[0]),
          axisLabel: {
            interval: 0,
            rotate: 30,
            margin: 20,
            fontSize: 10,
            color: '#fff'
          }
        }],
        yAxis: [{
          axisLabel: {
            color: '#fff'
          },
          name: '人数（人）',          // x轴单位名称
          nameLocation: 'end',   // 名称显示在轴末端
          nameGap: 15,            // 名称与轴的距离
          nameTextStyle: {
            fontSize: 14,
            fontWeight: 'bold',
            color: 'white'
          },

        }],

        series: [{
          type: 'bar',
          id: 'sales',
          // 显示柱形图对应的数值
          label: {
            show: true,         // 显示数值标签 
            position: 'top',    // 标签位置：可选 'top'（顶部）、'inside'（内部）等 
            color: '#FFF',   // 标签文字颜色 
            fontSize: 14,       // 字体大小
            formatter: '{c}'    // 格式化显示内容，{c} 表示当前数据值 
          },
          dataGroupId: subData.dataGroupId,
          data: subData.data.map(item => item[1]),
          universalTransition: { enabled: true },
          itemStyle: {
            color: {
              type: 'linear', // 线性渐变 
              x: 1,          // 渐变起点 x 坐标（0 表示左侧，1 表示右侧）
              y: 1,          // 渐变起点 y 坐标（0 表示顶部，1 表示底部）
              x2: 0,         // 渐变终点 x 坐标
              y2: 0,         // 渐变终点 y 坐标（从上到下渐变）
              colorStops: [
                {
                  offset: 0, color: 'rgb(41, 128, 185)' // 渐变起始颜色
                },
                {
                  offset: 0.5, color: 'rgb(109, 213, 250)' // 渐变起始颜色
                },
                {
                  offset: 1, color: 'rgb(255, 255, 255)' // 渐变结束颜色
                }
              ]
            }
          }
        }],
        graphic: [{
          type: 'text',
          left: 50,
          top: 0,
          style: {
            text: '<<返回',
            fontSize: 18,
            fill: '#ffafcc',
          },
          onclick: () => myChart.setOption(option, true)
        }]
      };

      // 关键步骤：显式清除所有系列
      // myChart.clear();
      myChart.setOption(drilldownOption, true);
    }
  });

}




</script>

<style scoped>
.box {
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.chart {
  height: 85%;
  width: 100%;
}

h1 {
  text-align: center;
  color: aliceblue;
  margin: 0;
  margin-top: 1rem;
  padding: 0;
}
</style>